<template>
  <div class="parallax"
       @scroll="onScrollChange">
    <div class="parallax-slow"
         ref="slow"
         :style="{top:slowTop}">
      <slot name='parallax-slow'></slot>
    </div>
    <div class="parallax-content"
         ref="content"
         :style="{zIndex: zIndex}">
      <slot name='parallax-content'></slot>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    zIndex: {
      type: Number,
      default: 2
    }
  },
  data () {
    return {
      scrollValue: 0,
      slowTop: '0px'
    }
  },
  methods: {
    onScrollChange (e) {
      this.scrollValue = e.target.scrollTop
      this.$emit('onScrollChange', e.target.scrollTop)
    }
  },
  watch: {
    scrollValue (val) {
      this.slowTop = (val - val / 2) + 'px'
    }
  }
}
</script>
<style lang = 'scss' scoped>
@import "@css/style.scss";
.parallax {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
  &-slow {
    width: 100%;
    position: relative;
  }
  &-content {
    width: 100%;
    position: relative;
  }
}
</style>